<div>
    <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
        <img alt="PrimeNG Designer" src="https://primefaces.org/cdn/primeng/images/uikit/primeone-cover-{{ isDarkMode ? 'dark' : 'light' }}.jpeg" class="w-full" />
    </div>

    <div class="card mb-5" style="border-radius: 50px">
        <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
            <div class="w-full md:w-6">
                <img alt="PrimeNG Designer" src="https://primefaces.org/cdn/primeng/images/uikit/uikit-figma.png" class="w-full" />
            </div>
            <div class="w-full md:w-6">
                <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
                <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
                <p class="mb-3 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>

                <ul class="flex flex-wrap m-0 p-0 text-lg">
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Auto Layout</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Variants</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Styles</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Interactive Components</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Boolean, Instance Swap and Text Properties</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Nested Instances</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
            <div class="w-full md:w-6">
                <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
                <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
                <p class="mb-3 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>

                <ul class="flex flex-wrap m-0 p-0 text-lg">
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Numerous Components</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Icon Library</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Easy Customization</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Atomic Approach</span>
                    </li>
                </ul>
            </div>
            <div class="w-full md:w-6">
                <img alt="PrimeNG Designer" src="https://primefaces.org/cdn/primeng/images/uikit/uikit-system.png" class="w-full" />
            </div>
        </div>
        <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
            <div class="w-full md:w-6">
                <img alt="PrimeNG Designer" src="https://primefaces.org/cdn/primeng/images/uikit/uikit-themes.png" class="w-full" />
            </div>
            <div class="w-full md:w-6">
                <div class="text-primary font-bold mb-2">DARK MODE</div>
                <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
                <p class="mb-3 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>

                <ul class="flex flex-wrap m-0 p-0 text-lg">
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Lara Light</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Lara Dark</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
            <div class="w-full md:w-6">
                <div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
                <div class="text-900 text-5xl font-bold mb-3">Tokens Support</div>
                <p class="mb-3 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>

                <ul class="flex flex-wrap m-0 p-0 text-lg">
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Countless Design Tokens</span>
                    </li>
                    <li class="flex align-items-center w-6 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Light and Dark Sets</span>
                    </li>
                    <li class="flex align-items-center w-12 p-3">
                        <i class="pi pi-check-circle text-green-600 mr-2"></i>
                        <span class="font-bold">Well Documented</span>
                    </li>
                </ul>
            </div>
            <div class="w-full md:w-6">
                <img alt="Tokens Support" src="https://primefaces.org/cdn/primeng/images/uikit/uikit-tokens.png" class="w-full" />
            </div>
        </div>
    </div>

    <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
        <a
            href="https://www.figma.com/file/96Tql1EywmMtVlSFTkQ2MB/Preview-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=CPR8n1g9WLc5D2Hs-1"
            class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
            style="border-radius: 50px"
        >
            <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
            <img alt="Figma Light" src="https://primefaces.org/cdn/primeng/images/uikit/logo-figma-light.svg" class="w-4rem" />
        </a>
        <a
            href="https://www.figma.com/file/ujRD6FFCWw1bE0h4wIebxl/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=bG7aorZhOFIqX1qz-1"
            class="p-5 w-full md:w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
            style="border-radius: 50px"
        >
            <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
            <img alt="Figma Dark" src="https://primefaces.org/cdn/primeng/images/uikit/logo-figma-dark.svg" class="w-4rem" />
        </a>
    </div>

    <div class="card mb-5" style="border-radius: 50px">
        <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
        <div class="mb-2 text-center line-height-3 text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
        <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary font-medium hover:underline text-center block">View License Details</a>

        <div class="grid">
            <div class="col-12 lg:col-4">
                <div class="p-3 h-full">
                    <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
                        <div class="text-900 font-bold text-xl mb-2">Single Designer</div>
                        <div class="text-600 font-medium">For individual designers</div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <div class="flex gap-3 flex-wrap">
                            <span class="text-2xl text-500 line-through">$99</span>
                            <span class="text-2xl font-bold text-900">$49</span>
                        </div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span class="font-bold">1 Designer</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Auto Layout & Variants</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Interactive Components</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Tokens Studio Support</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>1 Year Free Updates</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Use on Unlimited Projects</span>
                            </li>
                        </ul>
                        <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
                        <a href="https://www.primefaces.org/store/uikit.xhtml" pRipple class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy Now</a>
                    </div>
                </div>
            </div>

            <div class="col-12 lg:col-4">
                <div class="p-3 h-full">
                    <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
                        <div class="text-900 font-bold text-xl mb-2">Team</div>
                        <div class="text-600 font-medium">For small teams</div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <div class="flex gap-3 flex-wrap">
                            <div class="flex gap-3 flex-wrap">
                                <span class="text-2xl text-500 line-through">$249</span>
                                <span class="text-2xl font-bold text-900">$149</span>
                            </div>
                        </div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span class="font-bold">Up to 5 Designers</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Auto Layout & Variants</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Interactive Components</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Tokens Studio Support</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>1 Year Free Updates</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Use on Unlimited Projects</span>
                            </li>
                        </ul>
                        <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
                        <a href="https://www.primefaces.org/store/uikit.xhtml" pRipple class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy Now</a>
                    </div>
                </div>
            </div>

            <div class="col-12 lg:col-4">
                <div class="p-3 h-full">
                    <div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px">
                        <div class="text-900 font-bold text-xl mb-2">Enterprise</div>
                        <div class="text-600 font-medium">For large teams</div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <div class="flex gap-3 flex-wrap">
                            <span class="text-2xl font-bold text-900">EXCLUSIVE DEALS</span>
                        </div>
                        <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                        <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span class="font-bold">Custom Team Size</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Auto Layout & Variants</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Interactive Components</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Tokens Studio Support</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>1 Year Free Updates</span>
                            </li>
                            <li class="flex align-items-center mb-3">
                                <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                <span>Use on Unlimited Projects</span>
                            </li>
                        </ul>
                        <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
                        <a href="mailto:contact@primetek.com.tr" pRipple class="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="border-radius: 50px">
        <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
        <div class="grid">
            <div class="col-12 lg:col-4 px-2 lg:px-5">
                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">What do I get when I purchase a license?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">You'll be able to download two Figma files for light and dark themes.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Is there a recurring fee or is the license perpetual?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">UI Kit license is perpetual so requires one time payment with 1 year free updates, not subscription based..</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Can I use UI Kit license for commercial projects?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Can I create multiple projects for multiple clients?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
            </div>
            <div class="col-12 lg:col-4 px-2 lg:px-5">
                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">What Does "Free Updates" Mean?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
                    All updates are completely free for the first year after your purchase. After this one-year period, you will no longer have access to newer versions. However, all versions released within the first year from your purchase date
                    will remain accessible to you indefinitely.
                </p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">How Can I Extend My Access to Updates After One Year?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">At PrimeStore, you have the option to purchase an additional update term. This will grant you access to all existing versions and updates for another year.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">How can I get support?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
                    PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can
                    seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY" class="text-primary font-medium hover:underline">Discord</a> and
                    <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="text-primary font-medium hover:underline">Forum</a>.
                </p>
            </div>
            <div class="col-12 lg:col-4 px-2 lg:px-5">
                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Does the enterprise license include contractors within the organization?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, contractors are also able to use the UI Kit within your company.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">Can I include UI Kit in an open source project?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>

                <div class="text-lg text-900 line-height-3 mb-2 font-bold text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
                <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
                    Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary font-medium hover:underline">contact us</a> so we can transfer the license to your client.
                </p>
            </div>
        </div>
    </div>
</div>
